<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="false">
            <a-form-model ref="form" :model="addModel" :rules="validatorRules" slot="detail">
                <a-row :gutter="48">
                    <a-col :span="12">
                        <a-form-model-item label="款项名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nodeName">
                            <a-input disabled v-model="addModel.nodeName" placeholder="请输入款项名称"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMoney">
                            <a-input-number disabled style="width: 100%" v-model="addModel.paymentMoney" placeholder="请输入金额"
                                :precision="2"></a-input-number>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="款项节点说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nodeDesc">
                            <a-textarea disabled v-model="addModel.nodeDesc" rows="4" placeholder="请输入款项节点说明" />
                        </a-form-model-item>
                    </a-col>
                    <!-- <a-col :span="24">
                        <a-form-model-item label="是否关联任务" :labelCol="labelCol" :wrapperCol="wrapperCol"
                            prop="isRelatedTask">
                            <j-dict-select-tag :disabled="formDisabled || addModel.relatedTaskDisabled" type="radio" v-model="addModel.isRelatedTask"
                                dictCode="YES_OR_NO" @input="relatedTaskInput" placeholder="请选择是否关联任务" />
                        </a-form-model-item>
                    </a-col> -->
                    <a-col :span="12">
                        <a-form-model-item label="任务进度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskNodeId">
                          <SelectTaskProgressInput v-model="addModel.taskNodeId" :disabled="formDisabled"
                              :templateDataList="templateDataList" @back="onChangeTaskNodeId" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="本任务关联款项金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskPaymentMoney">
                        <a-input-number
                          disabled
                          style="width: 100%"
                          v-model="addModel.taskPaymentMoney"
                          placeholder="请输入本任务关联款项金额"
                          :precision="2"></a-input-number>
                      </a-form-model-item>
                    </a-col>
                    <!-- <template v-if="addModel.isRelatedTask == 1">
                        <a-col :span="12">
                            <a-form-model-item label="是否关联进度" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                prop="isRelatedTaskNode">
                                <j-dict-select-tag :disabled="formDisabled || addModel.isRelatedTaskNodeDisabled" type="radio" v-model="addModel.isRelatedTaskNode"
                                    dictCode="YES_OR_NO" @input="collectionDateInput" placeholder="请选择是否关联进度" />
                            </a-form-model-item>
                        </a-col>
                        

                        <a-col :span="12">
                            <a-form-model-item label="是否应收" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                prop="isCollectionPayment">
                                <j-dict-select-tag :disabled="formDisabled" type="radio" v-model="addModel.isCollectionPayment"
                                    dictCode="YES_OR_NO" placeholder="请选择是否应收" @input="collectionPaymentInput" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12" v-if="addModel.isCollectionPayment == 1">
                            <a-form-model-item label="预计应收日期" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                prop="collectionDate">
                                <j-date :disabled="formDisabled" placeholder="请选择预计应收日期" v-model="addModel.collectionDate"
                                    date-format="YYYY-MM-DD" style="width: 100%" />
                            </a-form-model-item>
                        </a-col>
                    </template> -->
                </a-row>
            </a-form-model>
        </j-form-container>
    </a-spin>
</template>
  
<script>

import { getAction } from '@/api/manage'
import BusinessCategorySelect from '@views/erp/components/BusinessCategorySelect';
import SelectTeamInput from '@views/scy/components/SelectTeamInput';
import SelectUserByDep from '@/views/scy/components/SelectUserByDep';
import SelectTaskProgressInput from '../reference/SelectTaskProgressInput'

export default {
    name: 'ErpMyOmcTaskPaymentForm',
    components: {
        BusinessCategorySelect, SelectTeamInput, SelectUserByDep, SelectTaskProgressInput
    },
    props: {
        // 表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        },
        templateDataList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            addModel: {},
            labelCol: {},
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 24 }
            },
            confirmLoading: false,
            validatorRules: {
                // isRelatedTask: [
                //     { required: true, message: '请选择是否关联任务' }
                // ],
                // isRelatedTaskNode: [
                //     { required: true, message: '请选择是否关联任务进度' }
                // ],
                // collectionDate: [
                //     { required: true, message: '请选择预计应收日期' }
                // ],
                taskNodeId: [
                    { required: true, message: '请选择关联任务进度' }
                ],
                // isCollectionPayment: [
                //     { required: true, message: '请选择是否应收' }
                // ],
            },
            url: {
                add: '/api/erp/omc/project/erpOmcProjectTask/add',
                edit: '/api/erp/omc/project/erpOmcProjectTask/edit',
                queryById: '/api/erp/omc/project/erpOmcProjectTask/queryById'
            },
            disabledOnly: false,
            disableOld: false,
            disableNew: false
        }
    },
    computed: {
        formDisabled() {
            return this.disabled
        }
    },
    watch: {
        assignedAmount: {
            handler: function (val) {
                if (val) {
                    let rate = this.addModel.contractAmount / val * 100
                    this.addModel.contractRate = Math.round((rate + Number.EPSILON) * 100) / 100;
                } else {
                    this.addModel.contractRate = '';
                    this.addModel.contractAmount = '';
                }
            },
            immediate: true
        }
    },
    created() {
        // 备份model原始值
        this.modelDefault = JSON.parse(JSON.stringify(this.addModel));
    },
    methods: {
        productTeamChange(val) {
            // debugger;
            getAction('/api/erp/omc/teammanager/erpOmcTeamManager/queryById', { id: val }).then((res) => {
                if (res.success) {
                    // debugger;
                    let data = res.result.records || res.result
                    this.$set(this.addModel, 'productTeam', val)
                    this.$set(this.addModel, 'teamLeader', data.tdfzr)
                }
            })
        },
        handleRateChange(e) {
            if (this.assignedAmount !== 0) {
                let amount = this.assignedAmount * e / 100
                this.addModel.contractAmount = Math.round((amount + Number.EPSILON) * 100) / 100;
            } else {
                this.addModel.contractAmount = 0
            }
        },
        handleAmountChange(e) {
            if (this.assignedAmount !== 0) {
                let rate = e / this.assignedAmount * 100
                this.addModel.contractRate = Math.round((rate + Number.EPSILON) * 100) / 100;
            } else {
                this.addModel.contractRate = 0
            }
        },
        businessCategoryHandle(obj) {
            if (obj) {
                this.addModel.categoryName = obj.categoryName
            }
        },
        add() {
            this.edit(this.modelDefault);
        },
        edit(record, flag) {  
            this.$refs['form'].clearValidate();
            Object.assign(this.$data, this.$options.data())

            this.addModel = Object.assign({}, record);
            var keys = Object.keys(this.addModel);
            // 是否关联任务进度
            // if (keys.indexOf('isRelatedTaskNode') == -1 || this.addModel.isRelatedTaskNode == null) {
            //     this.$set(this.addModel, 'isRelatedTaskNode', 0)
            // }
            // 是否关联任务
            // if (keys.indexOf('isRelatedTask') == -1 || this.addModel.isRelatedTask == null) {
            //     this.$set(this.addModel, 'isRelatedTask', 1)
            // }
            // if (this.addModel.isRelatedTaskNode == 0) {
            //     this.$delete(this.validatorRules, 'taskNodeId');
            // } else {
            //     this.$set(this.validatorRules, 'taskNodeId', [{ required: true, message: '请选择关联任务进度!' }]);
            // }
            // if (flag == '1') {
            //     this.disableNew = false
            //     this.disableOld = true
            // } else {
            //     this.disableOld = false
            //     this.disableNew = false
            // }
            this.visible = true;
        },

        // 请选择是否关联任务
        relatedTaskInput(item) {
            this.$set(this.addModel, 'isRelatedTaskNode', '0')
            // this.$set(this.addModel,'isCollectionPayment','0')
            this.$set(this.addModel,'collectionDate',undefined)
            this.$set(this.addModel, 'taskNodeId', undefined)
            this.$set(this.addModel, 'taskNodeId_dictText', undefined)
        },

        // 请选择是否关联任务进度
        collectionDateInput(item) {
            this.$set(this.addModel, 'taskNodeId', undefined)
            this.$set(this.addModel, 'taskNodeId_dictText', undefined)
            if (item == 0) {
                this.$delete(this.validatorRules, 'taskNodeId');
            } else {
                this.$set(this.validatorRules, 'taskNodeId', [{ required: true, message: '请选择关联任务进度!' }]);
            }
        },
        // 是否应收
        collectionPaymentInput(){
            this.$set(this.addModel,'collectionDate',undefined)
        },

        // 选择任务进度
        onChangeTaskNodeId(item) {
            if (item && item.length && item[0].nodeName) {
                this.$set(this.addModel, 'taskNodeId_dictText', item[0].nodeName)
            }
            this.$set(this.addModel, 'taskProgress', item[0].nodeProgress || '') // 任务节点进度
        },

        // submitForm() {
        //     const that = this;
        //     // 触发表单验证
        //     this.$refs.form.validate(valid => {
        //         if (valid) {
        //             // that.confirmLoading = true;
        //             if (!this.addModel.id) {
        //                 this.addModel.id = parseInt(Math.random() * 1000000000000);
        //             }
        //             this.$set(this.addModel, 'paymentId', this.addModel.id)
        //             this.$emit('ok', this.addModel);
        //         }
        //     })
        // },

        emitForm() {
            let obj = null
            this.$refs.form.validate(valid => {
                if (valid) {
                    obj = {
                        ...this.addModel,
                        // laborCost: this.laborCost
                    }
                } else {
                    obj = null
                }
            });
            delete obj.relatedTaskDisabled
            delete obj.isRelatedTaskNodeDisabled
            return obj

        },
    }
}
</script>
  